{% load custom_filters %}
<html>
<head>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/offline.css">
    <link rel="stylesheet" href="../../static/css/video-js.css">
    <link rel="stylesheet" href="../../static/css/yakshcustom.css" type="text/css" />

    <title>
        {% block pagetitle %} {{course.name}} {% endblock %}
    </title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="../../index.html">
                <img src="../../static/images/yaksh_banner.png" alt="YAKSH">
                </img>
            </a>
        </div>
    </div>
</nav>
<div class="container" style="margin-top:50px">

    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#">
                  {{ module.name }}
                </a>
              </li>
              <div class="sidebar-submenu">
                  <ul>
                    <!-- loop -->
                    {% for unit in module.get_learning_units %}
                    {% if unit.type == 'lesson' %}
                      <li class="nav-item">
                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.lesson.name|replace_spaces}}/{{unit.lesson.name|replace_spaces}}.html">
                          {{unit.lesson.name}}
                        </a>
                      </li>
                    {% else %}
                      <li class="nav-item">
                        <a class="nav-link {% if unit.lesson.name == lesson.name %}active{% endif %}" href="../{{unit.quiz.description|replace_spaces}}/{{unit.quiz.description|replace_spaces}}.html">
                          {{unit.quiz.description}}
                        </a>
                      </li>
                    {% endif %}
                    {% endfor %}
                    <!-- End of loop -->
                  </ul>
              </div>
            </ul>
          </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="col-md-10">
                <center>
                    <h1>
                        {% block subtitle %}
                            {{course.name}}
                        {% endblock %}
                    </h1>
                <hr>
                </center>
                {% block content %}
                    <center><h2>{{module.name}}</h2></center>
                    <hr>
                    <div id="status"></div>
                    <hr>
                    <br>
                    <div class="text-center">
                        <!-- Change Yaksh TODO -->
                        <a class="btn btn-success" href="http://yaksh.fossee.in/exam/start/{{quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" target="_blank">{{quiz.description}}</a>
                        {% if next_unit.type == 'lesson' %}
                        <a class="btn btn-info" href="../{{next_unit.lesson.name|replace_spaces}}/{{next_unit.lesson.name|replace_spaces}}.html">
                            Next
                        </a>
                        {% else %}
                        <a class="btn btn-info" href="../{{next_unit.quiz.description|replace_spaces}}/{{next_unit.quiz.description|replace_spaces}}.html" target="_blank">
                            Next
                        </a>
                        {% endif %}
                    </div>

                {% endblock %}
            </div>
        </main>
    </div>
    <footer class="footer" id="footer_div">
            <p align="center">Developed by FOSSEE group, IIT Bombay</p>
    </footer>
</div>

</body>
<script src="../../static/js/jquery-3.3.1.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/video.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    var online = navigator.onLine;
    if(online){
        var status = document.getElementById("status").innerHTML = "<span class='badge badge-success'>User is online</span>";

    }else{
        document.getElementById("status").innerHTML = "<span class='badge badge-danger'>User is offline</span>";
    }
});
</script>
</html>